<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>美居精选</title>
  <link rel="stylesheet" href="./lib/layui/css/layui.css" />
  <style>
    body {
        background: #f9f8f7;
      }
      .dib {
        display: inline-block;
      }
      .header {
        padding: 0 100px;
        display: flex;
        align-items: center;
        height: 70px;
        background-color: #fff;
      }
      .header img{
        width: 164px;
        height: 30px;
      }
      .login-box {
        margin: 100px auto;
        width: 860px;
        height: 530px;
        border: 1px solid #ccc;
        background-color: #fff;
        font-size: 0;
      }
      .login-box > div {
        width: 50%;
        height: 100%;
        font-size: 16px;
        box-sizing: border-box;
      }
      .login-box .pic {
        padding: 10px;
      }
      .login-box .form-container {
        padding: 20px;
        vertical-align: bottom;
      }
      .login-box form {
        width: 100%;
        padding-top: 20px;
      }
      .login-box form .title-item {
        height: 80px;
        line-height: 80px;
      }
      .login-box form .title {
        color: #FF5722;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
      }
      .login-box form .layui-form-item {
        margin-bottom: 30px;
      }
      .login-box form .layui-input-block {
        margin: 0;
        padding: 0 50px;
      }
      .login-box form input,
      .login-box form .layui-btn {
        width: 100%;
      }
      .login-box form .layui-btn {
        background-color: #FF5722!important;
      }
      .login-box .pic img {
        width: 100%;
        height: 100%;
      }
    </style>
</head>

<body class="layui-layout-body">
  <div class="header">
    <div class="logo"><img src="./images/logo@2x.png" alt="" /></div>
    <span>欢迎登陆</span>
  </div>
  <div class="login-box">
    <div class="pic dib"><img src="./images/bg.png" alt="" /></div>
    <div class="form-container dib">
      <form class="layui-form" action="">
        <div class="layui-form-item title-item">
          <p class="title">用户名密码登录</p>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <input type="text" name="title" required lay-verify="required" placeholder="请输入用户名" autocomplete="off"
              class="layui-input" />
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off"
              class="layui-input" />
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="submit">
              立即提交
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <script src="./lib/layui/layui.js"></script>
  <script>
    layui.use(["form", "element", "layer"], function () {
      var form = layui.form;
      var element = layui.element;
      var layer = layui.layer;
      var $ = layui.jquery;

      form.on("submit(submit)", function (data) {
        var username = data.field.title;
        var password = data.field.password;

        if (!username || !password) {
          layer.msg("请输入用户名和密码", { icon: 2 });
          return false;
        }

        // 显示加载提示
        var loadIndex = layer.load(1, { shade: [0.1, "#fff"] });

        // 发送登录请求
        $.ajax({
          url: "/api/login",
          type: "POST",
          contentType: "application/json",
          data: JSON.stringify({
            username: username,
            password: password
          }),
          success: function (res) {
            layer.close(loadIndex);
            if (res.code === 200) {
              // 保存 token 到 localStorage
              if (res.data && res.data.token) {
                localStorage.setItem("token", res.data.token);
                localStorage.setItem("userId", res.data.userId);
                localStorage.setItem("username", res.data.name || username);
              }
              layer.msg("登录成功", { icon: 1 }, function () {
                // 跳转到主页
                window.location.href = "/";
              });
            } else {
              layer.msg(res.message || "登录失败", { icon: 2 });
            }
          },
          error: function (xhr, status, error) {
            layer.close(loadIndex);
            layer.msg("网络错误，请稍后重试", { icon: 2 });
            console.error("登录错误:", error);
          }
        });

        return false; //阻止表单跳转
      });
    });
  </script>
</body>

</html>